<template>
  <div>
    <div
      class="navbar navbar-inverse navbar-fixed-top"
      id="navbar"
      role="banner"
      style="background-color: #21262c; border-bottom: 1px solid #21262c"
    >
      <div class="container">
        <div class="navbar-header">
          <button
            class="navbar-toggle collapsed"
            type="button"
            data-toggle="collapse"
            data-target=".zui-navbar-collapse"
          >
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="/" class="navbar-brand">
            <span class="path-zui-36">
              <i class="path-1"></i>
              <i class="path-2"></i>
            </span>
            <span class="brand-title">故事汇交流网</span>
            &nbsp;
            <i
              data-toggle="tooltip"
              id="compactTogger"
              data-placement="bottom"
              class="icon icon-home"
              data-original-title=""
              title=""
            ></i>
          </a>
        </div>
        <nav class="collapse navbar-collapse zui-navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li id="">
              <router-link to="/">
                <span>首页</span>
                <i class="icon icon-home"></i>
              </router-link>
            </li>
            <li id="story" @click="clear">
              <router-link to="/story">
                <i class=""></i>
                <span>故事广场</span>
              </router-link>
            </li>
            <li id="talk" @click="clear">
              <router-link to="/theme">
                <i class=""></i>
                <span>交流互动</span>
              </router-link>
            </li>

            <li id="search">
              <!-- 导航中的表单 -->
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input
                    type="text"
                    class="form-control"
                    placeholder="搜索"
                    v-model="sou"
                  />
                </div>
                <button type="submit" class="btn btn-default" @click="search">
                  <i class="icon icon-search"></i>
                </button>
              </form>
            </li>

            <li id="wirte">
              <router-link to="/writeStory">
                <i class="iconfont icon-tubiaozhizuomoban-"></i>
                <span>写故事</span>
              </router-link>
            </li>
            <li id="my">
              <router-link to="/center">
                <i class="icon icon-user"></i>
                <span>个人中心</span>
              </router-link>
            </li>
            <li id="navDownloadLink">
              <router-link to="/login">
                <span>登录 | 注册</span>
              </router-link>
            </li>
            <li id="toadmim">
              <a href="http://localhost:8080/story/">
                <span>跳转到后台</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
//import {Bus} from '../main.js'
// import {Search} from '../main.js'
export default {
  name: "App",
  components: {},
  data() {
    return {
      sou: "",
    };
  },

  methods: {
    search() {
      console.log(this.sou + "sss");
      this.$router.push({
        path: "/story",
     
      });
      window.localStorage.setItem("search", this.sou);
    },
	clear(){
		this.sou="";
		window.localStorage.setItem("search", this.sou);
	}
  },
  mounted() {},
};
</script>

<style scoped="scoped">
@import "../assets/css/zui.css";
@import "../assets/fonts/iconfont.css";
@import "../assets/fonts/demo.css";
@import "../assets/css/swiper-bundle.min.css";
.brand-title {
  font-size: 20px;
  line-height: 20px;
}
</style>
